<template>
  <div v-loading="isLoading">
    <div class="weather_container">
      <div class="BAC-title" style="height: 68px; font-size: 24px">
        <img
        v-if="page != 'index'"
        class="goback"
        @click="goBack"
        src="../../../static/images/bridgeAreaControl/fanhui_icon.png"
        alt=""
      />
        水上桥区管控专题
      </div>
      <div class="content-container" v-show="page=='index'">
        <div class="content">
          <div class="title">航标情况</div>
          <div class="hbqk-content">
            <div class="hbqk-item">
              <div class="item-top">桥航标数</div>
              <div class="item-bottom">{{cbqkData.qiaohanbiao||"--"}}</div>
            </div>
            <div class="hbqk-item">
              <div class="item-top">桥柱灯数</div>
              <div class="item-bottom">{{cbqkData.qiaozhudeng||"--"}}</div>
            </div>
            <div class="hbqk-item">
              <div class="item-top">桥区浮标数</div>
              <div class="item-bottom">{{cbqkData.fubiao||"--"}}</div>
            </div>
            <div class="hbqk-item">
              <div class="item-top">其他航标数</div>
              <div class="item-bottom">{{cbqkData.other||"--"}}</div>
            </div>
            <div class="hbqk-item">
              <div class="item-top">在线率</div>
              <div class="item-bottom item-bottom-zxl">{{cbqkData.normalRate||"--"}}</div>
            </div>
            <div class="hbqk-item">
              <div class="item-top">异常数</div>
              <div class="item-bottom item-bottom-ycs">{{cbqkData.hangbiaoAbnormal||"--"}}</div>
            </div>
          </div>
        </div>
        <div class="content">
          <div class="title">巡查情况</div>
          <div class="xcqk-content">
            <div class="xcqk-item">
              <div class="item-label">巡查时间</div>
              <div class="item-value">{{xcqkData.xcTime||"--"}}</div>
            </div>
            <div class="xcqk-item">
              <div class="item-label">巡查里程数</div>
              <div class="item-value item-value-hdlc">{{xcqkData.mile||"--"}}</div>
            </div>
            <div class="xcqk-item">
              <div class="item-label">总结</div>
              <div class="item-value">
                {{xcqkData.zongjie||"--"}}
              </div>
            </div>
            <div class="xcqk-item">
              <div class="item-label">障碍物异常</div>
              <div class="item-value">
                {{xcqkData.zhangaiwuyc||"--"}}
              </div>
            </div>
            <div class="xcqk-item">
              <div class="item-label">出浅异常</div>
              <div class="item-value">
                {{xcqkData.chugianyc||"--"}}
              </div>
            </div>
            <div class="xcqk-item">
              <div class="item-label">违法情况</div>
              <div class="item-value">
                {{xcqkData.weifagk||"--"}}
              </div>
            </div>
            <div class="xcqk-item">
              <div class="item-label">巡查人员</div>
              <div class="item-value">{{xcqkData.xcMenber||"--"}}</div>
            </div>
          </div>
        </div>
        <div class="content">
          <div class="title">巡检记录</div>
          <div class="xjjl-content">
            <el-table :data="xcjlData" style="width: 100%" size="small">
              <el-table-column prop="cBummc" label="单位名称" width="65" />
              <el-table-column prop="nXunhcs" label="巡检次数" width="65" />
              <el-table-column prop="xcTime" label="巡检时间" width="86" />
              <el-table-column prop="mile" label="巡查里程" width="65" />
              <el-table-column prop="address" label="操作">
                <template #default="scope">
                  <el-button
                    size="small"
                    type="primary"
                    link
                    @click="listDetail(scope.row)"
                    >详情 ></el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="content-container" v-show="page=='listDetail'">
        <div class="content">
          <div class="title">巡查情况</div>
          <div class="xcqk-content">
            <div class="xcqk-item">
              <div class="item-label">巡查时间</div>
              <div class="item-value">{{xcqkDataDetail.xcTime||"--"}}</div>
            </div>
            <div class="xcqk-item">
              <div class="item-label">巡查里程数</div>
              <div class="item-value item-value-hdlc">{{xcqkDataDetail.mile||"--"}}</div>
            </div>
            <div class="xcqk-item">
              <div class="item-label">总结</div>
              <div class="item-value">
                {{xcqkDataDetail.zongjie||"--"}}
              </div>
            </div>
            <div class="xcqk-item">
              <div class="item-label">障碍物异常</div>
              <div class="item-value">
                {{xcqkDataDetail.zhangaiwuyc||"--"}}
              </div>
            </div>
            <div class="xcqk-item">
              <div class="item-label">出浅异常</div>
              <div class="item-value">
                {{xcqkDataDetail.chugianyc||"--"}}
              </div>
            </div>
            <div class="xcqk-item">
              <div class="item-label">违法情况</div>
              <div class="item-value">
                {{xcqkDataDetail.weifagk||"--"}}
              </div>
            </div>
            <div class="xcqk-item">
              <div class="item-label">巡查人员</div>
              <div class="item-value">{{xcqkDataDetail.xcMenber||"--"}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from "vue";

import { useRouter } from "vue-router";
const router = useRouter();
// 引入api
import {
  channelInspection,
  navigationSituation,
} from "../../../utils/bridgeAreaControlApi";
const tableData = [
  {
    date: "2016-05",
    name: "Tom",
    address: "Angeles",
  },
  {
    date: "2016-05",
    name: "Tom",
    address: "Angeles",
  },
  {
    date: "2016-05",
    name: "Tom",
    address: " Angeles",
  },
  {
    date: "2016-05",
    name: "Tom",
    address: " Angeles",
  },
];

const page = ref("index");
const cbqkData = ref({});
const xcqkData = ref({});
const xcqkDataDetail = ref({});
const xcjlData = ref([]);
const isLoading = ref(false);
const waterway = ref("");
const loadingNum = ref(0);
const goBack = () => {
  page.value = "index";
};
const showLoading = () => {
  isLoading.value = true;
  loadingNum.value++;
};
const hiddenLoading = () => {
  loadingNum.value--;
  if (loadingNum.value === 0) {
    isLoading.value = false;
    loadingNum.value = 0;
  }
};
const listDetail = (val) => {
  xcqkDataDetail.value = val;
  page.value = "listDetail";
};
const apinavigationSituation = () => {
  showLoading();
  // waterway.value
  navigationSituation({ waterway: waterway.value })
    .then((res) => {
      let data = res.data;
      cbqkData.value = data[0];
    })
    .finally(() => {
      hiddenLoading();
    });
};
const apichannelInspection = () => {
  showLoading();
  channelInspection({ waterway: waterway.value })
    .then((res) => {
      let data = res.data;
      xcqkData.value = data.new;
      xcjlData.value = data.list;
    })
    .finally(() => {
      hiddenLoading();
    });
};

onMounted(() => {
  let routerData = router?.currentRoute?.value?.query;
  let waterwayRouter = routerData?.waterway;
  // debugger;
  waterway.value = waterwayRouter || "";
  apichannelInspection();
  apinavigationSituation();
});
</script>

<style lang="scss" scoped>
::-webkit-scrollbar {
  display: none;
}
.weather_container {
  height: 100vh;
  overflow: hidden;
  .filter {
    display: flex;
    margin: 0px 0px 16px 0px;
    background-color: #fff;
    width: 100%;
    position: absolute;
    top: 68px;
    left: 0;
    z-index: 10;
    padding: 5px 20px;
    box-sizing: border-box;
    .selectClass {
      width: calc(50% - 5px);
    }
    .selectClass:nth-child(1) {
      margin-right: 10px;
    }
  }
  margin: 0 16px;
  .content-container {
    margin-top: 80px;
    overflow-y: scroll;
    height: calc(100vh - 80px);
  }
  .content {
    background: #ffffff;
    box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
    .title {
      display: flex;
      background: rgba(22, 93, 255, 0.05);
      height: 36px;
      color: #262626;
      padding: 0 8px;
      align-items: center;
      border-bottom: 1px solid #e6e6e6;
      font-size: 14px;
    }
    .echarts {
      height: 316px;
      margin: 0 auto;
    }
    #lineChart1,
    #lineChart2 {
      margin-top: 10px;
      width: 200px;
      height: 200px;
    }
    .lineChart1Value {
      color: #595959;
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      line-height: 60px;
    }
  }
}
.BAC-title {
  width: 100%;
  font-size: 24px;
  line-height: 68px;
  background: rgba(49, 118, 233, 0.6);
  color: #fff;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background: url("../../../static/images/bridgeAreaControl/bg_zhuanti.png")
    no-repeat;
  background-size: cover;
  .goback{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
  }
}
::v-deep.van-field {
  background-color: #f8f9fb;
  border-radius: 8px;
}
.situation-list {
  padding: 0 10px 10px;
  .list-item {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #8c8c8c;
    line-height: 30px;
    .item-title {
      .dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #f7f9fc;
        margin-right: 10px;
      }
    }

    .item-value {
    }
  }
}
.hbqk-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 16px;
  box-sizing: border-box;
  .hbqk-item {
    width: 50%;
    margin-top: 16px;
    padding-left: 20px;
    box-sizing: border-box;
    .item-top {
      font-size: 14px;
      color: #595959;
      line-height: 20px;
      img {
        width: 24px;
        height: 24px;
        margin-right: 8px;
      }
    }

    .item-bottom {
      margin-top: 2px;
      font-weight: bold;
      font-size: 20px;
      color: #595959;
      line-height: 28px;
    }
    .item-bottom-zxl {
      font-weight: bold;
      font-size: 24px;
      color: #00c482;
    }
    .item-bottom-ycs {
      font-weight: bold;
      font-size: 24px;
      color: #595959;
    }
  }
}

.xcqk-content {
  padding: 8px 20px 16px;
  box-sizing: border-box;
  .xcqk-item {
    margin-top: 8px;
    line-height: 22px;
    display: flex;
    justify-content: space-between;
    .item-label {
      font-size: 14px;
      color: #595959;
    }

    .item-value {
      font-weight: 500;
      font-size: 14px;
      color: #262626;
    }
    .item-value-hdlc {
      color: #266fe8;
    }
  }
  .xcqk-item:nth-child(3) {
    display: block;
  }
}
.xjjl-content {
  padding: 16px 8px;
}
</style>
